<template>
  <div class="add-skill-page">
    <!-- 顶部导航 -->
    <div class="page-header add-skill-header">
      <div class="header-content">
        <button class="back-btn" @click="goBack">
          <span class="back-icon">←</span>
        </button>
        <h1 class="page-title">新增技能</h1>
        <div class="placeholder"></div>
      </div>
    </div>

    <!-- 表单内容 -->
    <div class="page-content add-skill-content">
      <div class="form-container">
        <form @submit.prevent="submitSkill">
          <!-- 技能名称 -->
          <div class="form-group">
            <label class="form-label">技能名称 *</label>
            <input 
              type="text" 
              v-model="skillForm.name" 
              class="form-input" 
              placeholder="请输入技能名称，如：编程、设计、摄影等"
              required
            >
          </div>

          <!-- 技能分类 -->
          <div class="form-group">
            <label class="form-label">技能分类</label>
            <select v-model="skillForm.category" class="form-select">
              <option value="">请选择分类</option>
              <option value="技术开发">技术开发</option>
              <option value="设计创意">设计创意</option>
              <option value="商务管理">商务管理</option>
              <option value="教育培训">教育培训</option>
              <option value="生活服务">生活服务</option>
              <option value="其他">其他</option>
            </select>
          </div>



          <!-- 经验年限 -->
          <div class="form-group">
            <label class="form-label">经验年限</label>
            <select v-model="skillForm.experience" class="form-select">
              <option value="">请选择经验年限</option>
              <option value="0-1年">0-1年</option>
              <option value="1-3年">1-3年</option>
              <option value="3-5年">3-5年</option>
              <option value="5-10年">5-10年</option>
              <option value="10年以上">10年以上</option>
            </select>
          </div>

          <!-- 认证情况 -->
          <div class="form-group">
            <label class="form-label">相关认证</label>
            <input 
              type="text" 
              v-model="skillForm.certification" 
              class="form-input" 
              placeholder="如有相关证书或认证，请填写"
            >
          </div>

          <!-- 技能描述 -->
          <div class="form-group">
            <label class="form-label">技能描述</label>
            <textarea 
              v-model="skillForm.description" 
              class="form-textarea" 
              placeholder="简要描述您的技能特长、擅长领域或成功案例"
              rows="4"
            ></textarea>
          </div>

          <!-- 是否可提供服务 -->
          <div class="form-group">
            <label class="form-label">服务提供</label>
            <div class="checkbox-group">
              <label class="checkbox-option">
                <input type="checkbox" v-model="skillForm.canProvideService">
                <span class="checkbox-label">我可以为他人提供此技能相关的服务</span>
              </label>
              <label class="checkbox-option">
                <input type="checkbox" v-model="skillForm.canTeach">
                <span class="checkbox-label">我可以教授此技能</span>
              </label>
            </div>
          </div>

          <!-- 提交按钮 -->
          <div class="form-actions">
            <button type="button" class="cancel-btn" @click="goBack">取消</button>
            <button type="submit" class="submit-btn">保存技能</button>
          </div>
        </form>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'AddSkill',
  data() {
    return {
      skillForm: {
        name: '',
        category: '',
        experience: '',
        certification: '',
        description: '',
        canProvideService: false,
        canTeach: false
      }
    }
  },
  methods: {
    goBack() {
      this.$router.go(-1)
    },
    submitSkill() {
      // 表单验证
      if (!this.skillForm.name.trim()) {
        alert('请输入技能名称')
        return
      }
      
      // 获取现有技能列表
      const existingSkills = JSON.parse(localStorage.getItem('userSkills') || '[]')
      
      // 创建新技能对象
      const newSkill = {
        id: Date.now(),
        name: this.skillForm.name.trim(),
        category: this.skillForm.category,
        experience: this.skillForm.experience,
        certification: this.skillForm.certification,
        description: this.skillForm.description,
        canProvideService: this.skillForm.canProvideService,
        canTeach: this.skillForm.canTeach,
        createdAt: new Date().toISOString()
      }
      
      // 添加到技能列表
      existingSkills.push(newSkill)
      
      // 保存到localStorage
      localStorage.setItem('userSkills', JSON.stringify(existingSkills))
      
      console.log('技能保存成功:', newSkill)
      alert('技能添加成功！')
      
      // 提交成功后返回上一页
      this.goBack()
    }
  }
}
</script>

<style scoped>
.add-skill-page {
  min-height: 100vh;
  background-color: #f8f9fa;
  padding-bottom: 80px;
}

/* AddSkill页面特有的样式 */

.add-skill-header {
  height: 80px;
  box-sizing: border-box;
}

.add-skill-header .header-content {
  justify-content: center;
  height: 100%;
}

.back-btn {
  background: none;
  border: none;
  color: #333;
  cursor: pointer;
  padding: 8px;
  border-radius: 50%;
  transition: all 0.2s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
}

.back-btn:hover {
  background: #f5f5f5;
  color: #007aff;
}

/* 页面标题样式已在App.vue中统一定义 */

.placeholder {
  width: 40px;
}

/* 页面内容样式已在App.vue中统一定义 */

.form-container {
  max-width: 600px;
  margin: 0 auto;
}

.form-group {
  margin-bottom: 24px;
}

.form-label {
  display: block;
  font-size: 16px;
  font-weight: 600;
  color: #2c3e50;
  margin-bottom: 8px;
}

.form-input,
.form-select,
.form-textarea {
  width: 100%;
  padding: 12px 16px;
  border: 2px solid #e1e8ed;
  border-radius: 12px;
  font-size: 16px;
  transition: border-color 0.3s ease;
  box-sizing: border-box;
}

.form-input:focus,
.form-select:focus,
.form-textarea:focus {
  outline: none;
  border-color: #42a5f5;
}

.form-textarea {
  resize: vertical;
  min-height: 100px;
}



.checkbox-group {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.checkbox-option {
  display: flex;
  align-items: center;
  cursor: pointer;
}

.checkbox-option input[type="checkbox"] {
  margin-right: 12px;
}

.checkbox-label {
  font-size: 16px;
  color: #2c3e50;
}

.form-actions {
  display: flex;
  gap: 16px;
  margin-top: 32px;
}

.cancel-btn,
.submit-btn {
  flex: 1;
  padding: 16px;
  border: none;
  border-radius: 12px;
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
}

.cancel-btn {
  background-color: #f8f9fa;
  color: #6c757d;
  border: 2px solid #e1e8ed;
}

.cancel-btn:hover {
  background-color: #e9ecef;
}

.submit-btn {
  background: linear-gradient(135deg, #42a5f5, #90caf9);
  color: white;
}

.submit-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(66, 165, 245, 0.4);
}

/* 响应式设计 */
@media (max-width: 768px) {
  .form-container {
    padding: 16px;
  }
  
  .form-actions {
    flex-direction: column;
  }
}
</style>